<template>
  <div>
    <div class="poll">
      <!-- 资源池 -->
      <div
        v-if="small == 0"
        @mousedown="boxdown"
        @mouseup="boxup"
        @mouseleave="boxleave"
        class="bodyBox"
      >
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.check ? 'subCheck' : ''"
          @mouseenter="subenter(item)"
          @mousedown="subdown(item)"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ index + 1 }}</template>
            <p style="user-select: none">{{ index + 1 }}</p>
          </a-tooltip>
        </span>
      </div>
      <div v-if="small == 1" @mouseleave="boxleave" class="smallBox">
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.check ? 'subCheck' : ''"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ index }}</template>
            <p>
              <!-- {{ index + 1 }} -->
            </p>
          </a-tooltip>
        </span>
      </div>
      <div
        v-if="small == 2"
        @mousedown="boxdown"
        @mouseup="boxup"
        @mouseleave="boxleave"
        class="body"
      >
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.disabled?'disabledCheck':''
          
          ||item.check ? 'subCheck' : ''"
          @mousedown="subdown(item)"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ item.id }}</template>
            <!-- <template slot="title" v-if="item.check">{{ index + 1 }}</template> -->
            <p style="user-select: none">
              {{ item.id }}
              <!-- {{ index + 1 }} -->
            </p>
          </a-tooltip>
        </span>
      </div>
      <div
        v-if="small == 3"
        @mousedown="boxdown"
        @mouseup="boxup"
        @mouseleave="boxleave"
        class="body"
      >
        <span
          v-for="(item, index) in subData"
          class="itemBox"
          :key="index"
          :class="item.check ? 'subCheck' : ''"
          @mouseenter="subenter(item)"
          @mousedown="subdown(item)"
          @mouseup="subUp(item)"
        >
          <a-tooltip placement="top">
            <template slot="title" v-if="item.check">{{ item.id }}</template>
            <!-- <template slot="title" v-if="item.check">{{ index + 1 }}</template> -->
            <p style="user-select: none">
              {{ item.id }}
              <!-- {{ index + 1 }} -->
            </p>
          </a-tooltip>
        </span>
      </div>
    </div>
    <!-- <a-button @click="save" type="primary">保存配置</a-button> -->
  </div>
</template>

<script>
export default {
  //total:循环添加总数，data:数据，small:1仅查看小框，0可选修改是否占用,2小格子可选
  props: ['total', 'data', 'small', 'group'],
  computed: {
    choseItems() {
      //计算属性，用来记录哪些被选中了，根据自己的需求编写
      var items = []
      for (var i = 1; i <= this.subData.length; i++) {
        if (this.subData[i].check) {
          items.push(1)
        } else {
          items.push(0)
        }
      }
      return items
    },
  },
  watch: {
    subData(val) {
      let d = []
      let c = val
      for (let i = 0; i < c.length; i += 6) {
        d.push(c.slice(i, i + 6))
      }
      this.checkGroup = []
      this.checkGroup1 = []
      d.forEach((el, index) => {
        if (el[0].check) {
          this.checkGroup.push(index)
        }
        if (el[0].disabled) {
          this.checkGroup1.push(index)
        }
      })
    },
  },
  created() {
    if (this.total) {
      //total随机产生数据
      for (let i = 1; i <= this.total; i++) {
        this.subData.push({ id: i, check: false, disabled: false, })
      }
    } else {
      //子组件传回数据
      this.subData = [...JSON.parse(this.data)]
    }
  },
  data() {
    return {
      lastItemId: 0, //上次选中的节点Id
      isDrop: false, //是否正在拖拽
      checkGroup: [],
      checkGroup1: [],
      checkNos: [],
      lsArr: [],
      lsArrS: [],
      subData: [
        // { id: 1, time: '00:00-00:30', check: false },
        // { id: 2, time: '00:30-01:00', check: false },
        // { id: 3, time: '01:00-01:30', check: false },
        // { id: 4, time: '01:30-02:00', check: false },
        // { id: 5, time: '02:00-02:30', check: false },
        // { id: 6, time: '02:30-03:00', check: false },
      ],
    }
  },
  methods: {
    save() {
      console.log(this.subData)
    },
    itemarray(a, b) {
      var arry = []
      for (var d = a; d <= b; d++) {
        arry.push(d)
      }
      return arry
    },
    subenter: function (item) {
      //拖选中子元素
      if (this.isDrop) {
        if (this.lastItemId != item.id) {
          var min = this.lastItemId <= item.id ? this.lastItemId : item.id
          var max = this.lastItemId < item.id ? item.id : this.lastItemId
          if (this.lastItemId - item.id < 0) {
            //正方向
            for (var i = min; i < Math.abs(this.lastItemId - item.id) + min; i++) {
              this.subData[i].check = !this.subData[i].check
              // if (!this.group) {
              //   if (this.subData[i].check) {
              //     this.checkNos.push(this.subData[i].id)
              //     console.log(this.checkNos)
              //   } else {
              //     console.log(this.subData[i], ' this.subData[i]')
              //     this.checkNos = this.checkNos.filter((i) => i != this.subData[i].id)
              //     console.log(this.checkNos)
              //   }
              // }
            }
          } else {
            //反方向
            for (var i = max - 1; i > min - 1; i--) {
              this.subData[i].check = !this.subData[i].check
              // if (!this.group) {
              //   if (this.subData[i].check) {
              //     this.checkNos.push(this.subData[i].id)
              //     console.log(this.checkNos)
              //   } else {
              //     this.checkNos = this.checkNos.filter((i) => i != this.subData[i].id)
              //     console.log(this.checkNos)
              //   }
              // }
            }
          }

          this.lastItemId = item.id
        }
      }
    },
    // subenter: function (item) {
    //   //拖选中子元素
    //   if (this.isDrop) {
    //     let target = item.id
    //     // console.log('item', item)
    //     // if (this.lastItemId != item.id) {
    //     var min = this.lastItemId <= item.id ? this.lastItemId : item.id
    //     var max = this.lastItemId < item.id ? item.id : this.lastItemId
    //     let checkArr = this.itemarray(min, max)
    //     let checkObj = []
    //     item.check = true
    //     this.lsArr.concat(checkArr)
    //     this.lsArr.forEach((i, index) => {
    //       let temp = this.subData.find((item) => item.id == i)
    //       if (temp) {
    //         // checkObj.push(temp)
    //         temp.check = true
    //       }
    //     })
    //     console.log(this.lsArr, '移动')
    //     console.log(checkArr, '移动this.')
    //     // if (this.lastItemId - item.id < 0) {
    //     //   //正方向
    //     //   for (var i = min; i < Math.abs(this.lastItemId - item.id) + min; i++) {
    //     //     this.subData[i].check = !this.subData[i].check
    //     //     // if (!this.group) {
    //     //     //   if (this.subData[i].check) {
    //     //     //     this.checkNos.push(this.subData[i].id)
    //     //     //     console.log(this.checkNos)
    //     //     //   } else {
    //     //     //     console.log(this.subData[i], ' this.subData[i]')
    //     //     //     this.checkNos = this.checkNos.filter((i) => i != this.subData[i].id)
    //     //     //     console.log(this.checkNos)
    //     //     //   }
    //     //     // }
    //     //   }
    //     // } else {
    //     //   //反方向
    //     //   for (var i = max - 2; i > min - 2; i--) {
    //     //     this.subData[i].check = !this.subData[i].check
    //     //     // if (!this.group) {
    //     //     //   if (this.subData[i].check) {
    //     //     //     this.checkNos.push(this.subData[i].id)
    //     //     //     console.log(this.checkNos)
    //     //     //   } else {
    //     //     //     this.checkNos = this.checkNos.filter((i) => i != this.subData[i].id)
    //     //     //     console.log(this.checkNos)
    //     //     //   }
    //     //     // }
    //     //   }
    //     // }

    //     // this.lastItemId = item.id
    //     // }
    //   }
    // },
    subdown: function (item) {
      if (item.disabled) return
      //单个选中子元素(一次选中6个)
      this.lastItemId = item.id
      item.check = !item.check //单个
      if (this.group) {
        let d = []
        let c = this.subData
        for (let i = 0; i < c.length; i += 6) {
          d.push(c.slice(i, i + 6))
        }
        this.checkGroup = []
        d.forEach((el, index) => {
          let temp = el.find((e) => e.id == item.id)
          if (temp) {
            el.forEach((i) => {
              i.check = item.check //6个一起
            })
          }
        })
        d.forEach((c, index) => {
          if (c[0].check) {
            this.checkGroup.push(index)
          }
        })
      } else {
        if (item.check) {
          this.checkNos.push(item.id)
        } else {
          this.checkNos = this.checkNos.filter((i) => i != item.id)
        }
      }
    },
    disabledDown: function (item) {
      // console.log('dis', item)
      //单个选中子元素(一次选中6个)
      this.lastItemId = item.id
      item.disabled = true
      if (this.group) {
        let d = []
        let c = this.subData
        for (let i = 0; i < c.length; i += 6) {
          d.push(c.slice(i, i + 6))
        }
        // console.log(d, 'dddd')
        this.checkGroup1 = []
        d.forEach((el, index) => {
          let temp = el.find((e) => e.id == item.id)
          if (temp) {
            // console.log(temp, 'tenp')
            el.forEach((i) => {
              i.disabled = true
            })
          }
        })
        d.forEach((c, index) => {
          // console.log(c, 'c')
          if (c[0].disabled) {
            this.checkGroup1.push(index)
          }
        })
      } else {
        if (item.disabled) {
          this.checkNos.push(item.id)
        } else {
          this.checkNos = this.checkNos.filter((i) => i != item.id)
        }
      }
    },
    boxdown: function () {
      //鼠标按下开始拖选
      this.isDrop = true
    },
    subUp: function (item) {
      // console.log(item, '抬起item')
      // console.log(this.lastItemId, 'this.lastItemId')
      // var min = this.lastItemId <= item.id ? this.lastItemId : item.id
      // var max = this.lastItemId < item.id ? item.id : this.lastItemId
      // let checkArr = this.itemarray(min, max)
      // let checkObj = []
      // this.lsArrS = checkArr
      // console.log(this.lsArr, 'this.lsArr')
      // console.log(this.lsArrS, 'this.最终')
      // this.lsArr.forEach((i, index) => {
      //   let temp = this.subData.find((item) => item.id == i)
      //   if (temp) {
      //     // checkObj.push(temp)
      //     temp.check = false
      //   }
      // })
      // this.lsArrS.forEach((i, index) => {
      //   let temp = this.subData.find((item) => item.id == i)
      //   if (temp) {
      //     // checkObj.push(temp)
      //     temp.check = true
      //   }
      // })
      //鼠标抬起取消拖选
      this.isDrop = false
    },
    boxup: function () {
      //鼠标抬起取消拖选
      this.isDrop = false
    },
    boxleave: function () {
      //当鼠标移出区域块时，视为取消拖选
      this.isDrop = false
    },
    handleMouseLeave: function () {
      //处理tooltip 移出时的延迟问题
      const tooltip = this.$refs.tooltip
      for (var i = 1; i <= tooltip.length; i++) {
        tooltip[i].handleClosePopper()
      }
    },
  },
}
</script>
<style>
.poll p {
  margin-bottom: 0px !important;
}
</style>
<style lang="less" scoped>
.poll {
  color: #fff;
  margin-top: 3px;
  margin-left: 3px;
  // display: flex;
  // flex-wrap: wrap;
  .bodyBox {
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 50px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -4px;
      p {
        width: 50px;
        height: 50px;
      }
    }
  }
  .body {
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -4px;
      p {
        width: 35px;
        height: 35px;
        font-size: 14px;
      }
    }
  }
  .smallBox {
    display: flex;
    flex-wrap: wrap;

    .itemBox {
      display: inline-block;
      width: 25px;
      height: 25px;
      // line-height: 25px;
      line-height: 25px !important;
      text-align: center;
      border: 1px solid rgb(87, 84, 84);
      margin: -1px 0 0 -1px;
      // margin-bottom: -5px;
      p {
        width: 25px;
        height: 25px;
      }
    }
  }
}
.subCheck {
  background-color: rgb(140, 236, 75);
  color: #72726b;
}
.disabledCheck {
  background: linear-gradient(
    45deg,
    rgba(117, 117, 117, 0.6) 0,
    rgba(117, 117, 117, 0.6) 10%,
    rgba(42, 44, 43, 1) 10%,
    rgba(42, 44, 43, 1) 20%,
    rgba(117, 117, 117, 0.6) 20%,
    rgba(117, 117, 117, 0.6) 30%,
    rgba(42, 44, 43, 1) 30%,
    rgba(42, 44, 43, 1) 40%,
    rgba(117, 117, 117, 0.6) 40%,
    rgba(117, 117, 117, 0.6) 50%,
    rgba(42, 44, 43, 1) 50%,
    rgba(42, 44, 43, 1) 60%,
    rgba(117, 117, 117, 0.6) 60%,
    rgba(117, 117, 117, 0.6) 70%,
    rgba(42, 44, 43, 1) 70%,
    rgba(42, 44, 43, 1) 80%,
    rgba(117, 117, 117, 0.6) 80%,
    rgba(117, 117, 117, 0.6) 90%,
    rgba(42, 44, 43, 1) 90%,
    rgba(42, 44, 43, 1) 100%
  );
  color: #fff;
}
</style>
